﻿<!--<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

</body>
</html>-->

<div class="tabs-users">
    <!--<ul>
        <li><a data-ng-class="{active : activeViewPath==='/ftpaccountinfo' || isActive('/ftpaccountinfo') }" href="#/ftpaccountinfo">FTP Reports </a></li>
    </ul>-->
</div><br />

<form name="ftpReportsForm" novalidate>
    <div class="title-bold">FTP Reports</div>
    <div style="display: table; width: 60%;">
        <div class="table-row-inp">
            <div class="inp-label" style="">Account Name:</div>
            <div class="inp-holder">
                <select ng-change="reportFTP.loadFTPReportsWithServerSettings()" class="select-box" style="width: 95%;" ng-model="reportFTP.accountId">                  
                    <option value="{{opt.id}}" ng-repeat="opt in reportFTP.accountsList">{{opt.name}}</option>
                </select>
            </div>
        </div>
        <div class="table-spacer">&nbsp;</div>
    </div>
    <div style="display: table; width: 60%;" ng-show="reportFTP.isFTPSettingsTableRowForDisplay()">
        <div class="table-row-inp">
            <div class="inp-label">FTP Server Address: </div>
            <div class="inp-holder">
                <span ng-show="!reportFTP.isNewFTPSettings && (reportFTP.isEditFtpSettings == null || reportFTP.isEditFtpSettings == undefined)">{{ reportFTP.ftpServerAddress }}</span>
                <!--ng-pattern='/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/'-->
                <input required type="text" style="width: 95%;" ng-show="reportFTP.isEditFtpSettings != null && reportFTP.isEditFtpSettings != undefined" ng-model-options="{ updateOn: 'blur' }" ng-model="reportFTP.ftpServerAddress" />
            </div>
        </div>
        <div class="table-spacer">&nbsp;</div>
        <div class="table-row-inp" >
            <div class="inp-label">FTP Server Port: </div>
            <div class="inp-holder">
                <span ng-show="!reportFTP.isNewFTPSettings && (reportFTP.isEditFtpSettings == null || reportFTP.isEditFtpSettings == undefined)">{{ reportFTP.ftpServerPort }}</span>
                <input required type="text" style="width: 95%;" ng-show=" reportFTP.isEditFtpSettings != null && reportFTP.isEditFtpSettings != undefined" ng-model="reportFTP.ftpServerPort" />
            </div>
        </div>
        <div class="table-spacer">&nbsp;</div>
        <div class="table-row-inp" >
            <div class="inp-label">FTP Server Type: </div>
            <div class="inp-holder">
                <span style="width: 95%;" ng-show="!reportFTP.isNewFTPSettings && (reportFTP.isEditFtpSettings == null || reportFTP.isEditFtpSettings == undefined)">{{ reportFTP.ftpServerType }}</span>
                <select required class="select-box" style="width: 95%;" ng-show=" reportFTP.isEditFtpSettings != null && reportFTP.isEditFtpSettings != undefined" ng-model="reportFTP.ftpServerType">
                    <option ng-selected="v.value == reportFTP.ftpServerType" ng-repeat="v in reportFTP.ftpServerTypes">{{v.value}}</option>
                </select>
            </div>
        </div>
        <div class="table-spacer">&nbsp;</div>
        <div class="table-row-inp" >
            <div class="inp-label">FTP User Name: </div>
            <div class="inp-holder">
                <span style="width: 95%;" ng-show="!reportFTP.isNewFTPSettings && (reportFTP.isEditFtpSettings == null || reportFTP.isEditFtpSettings == undefined)">{{ reportFTP.ftpServerUser }}</span>
                <input required style="width:  95%;" type="text" ng-show="reportFTP.isEditFtpSettings != null && reportFTP.isEditFtpSettings != undefined" ng-model="reportFTP.ftpServerUser" />
            </div>
        </div>
        <div class="table-spacer">&nbsp;</div>
        <div class="table-row-inp" >
            <div class="inp-label">FTP Password: </div>
            <div class="inp-holder">
                <span style="width: 95%;" ng-show="!reportFTP.isNewFTPSettings && (reportFTP.isEditFtpSettings == null || reportFTP.isEditFtpSettings == undefined)">{{ reportFTP.ftpServerPassword }}</span>
                <input required style="width: 95%;" type="text" ng-show="reportFTP.isEditFtpSettings != null && reportFTP.isEditFtpSettings != undefined" ng-model="reportFTP.ftpServerPassword" />
            </div>
        </div>
        <div class="table-spacer">&nbsp;</div>
        <div class="table-row-inp">
            <div class="inp-label">Directory Path: </div>
            <div class="inp-holder">
                <span style="width: 95%;" ng-show="!reportFTP.isNewFTPSettings && (reportFTP.isEditFtpSettings == null || reportFTP.isEditFtpSettings == undefined)">{{ reportFTP.ftpDirectoryPath }}</span>
                <input required style="width: 95%;" type="text" ng-show="reportFTP.isEditFtpSettings != null && reportFTP.isEditFtpSettings != undefined" ng-model="reportFTP.ftpDirectoryPath" />
            </div>
        </div>
        <div class="table-spacer">&nbsp;</div>
    </div>
    <button class="btn-green" ng-show="reportFTP.isSaveButtonForDisplay()" ng-click="reportFTP.saveFtpSettings(reportFTP.accountId)">Save</button>
    <button class="btn-green" ng-show="reportFTP.isEditButtonForDisplay()" ng-click="reportFTP.toggleEditModeFtpSettings(reportFTP.accountId)">Edit</button>

    <br /><br />
    <div class="table_g">
        <div class="table-row_g" ng-show="reportFTP.accountId != null && reportFTP.accountId != '' && reportFTP.accountId != undefined">            
            <div class="table-head_g width_200">Existing Reports/Filters</div>
            <div class="table-head_g center-align width_200">Recurrence</div>
            <div class="table-head_g center-align width_200">Generation Date</div>
            <div class="table-head_g center-align width_130">Actions</div>
        </div>
        <div class="table-row_g" ng-repeat="item in reportFTP.ftpReportsUI track by item.id">           
            <div class="table-cell_g width_200" ng-class="{'last':$last, 'empty-cell-red': reportFTP.findReportOrFilterName(item.reportId) == '' }">
                <span style="width: 96%;" ng-show="!reportFTP.getToggleStateFtpReport(item.id)">{{reportFTP.findReportOrFilterName(item.reportId)}}</span>
                <span class="error" ng-if="reportFTP.findReportOrFilterName(item.reportId) == '' && !reportFTP.getToggleStateFtpReport(item.id) " style="color: red;">The report/filter has been deleted.</span>
                <select required class=" select-box" style="width: 96%;" ng-show="reportFTP.getToggleStateFtpReport(item.id)" ng-model="item.reportId">
                    <option ng-selected="v.id == item.reportId" ng-repeat="v in reportFTP.accountFiltersUI" value="{{v.id}}">{{v.name}}</option>
                </select>
            </div>
            <div class="table-cell_g center-align width_200" ng-class="{'last':$last}">
                <span style="width: 96%;" ng-show="!reportFTP.getToggleStateFtpReport(item.id)">{{reportFTP.findFrequencyTypeEnumName(item.frequency)}}</span>
                <select required class="select-box" style="width: 96%;" ng-show="reportFTP.getToggleStateFtpReport(item.id)" ng-model="item.frequency">
                    <option ng-selected="v.key == item.frequency" ng-repeat="v in reportFTP.ftpReportFrequencies" value="{{v.key}}">{{v.value}}</option>
                </select>
            </div>
            <div class="table-cell_g center-align width_200" ng-class="{'last':$last}">
                <span style="width: 96%;">{{item.nextGenerationDate}}</span>
            </div>
            <div class="table-cell_g center-align width_130" ng-class="{'last':$last}">
                <a href="" style="margin-right: 10px; float: left;" ng-show="!reportFTP.getToggleStateFtpReport(item.id)" ng-click="reportFTP.toggleEditModeFtpReport(item.id)">Edit</a>
                <a href="" style="margin-right: 10px; float: left;" ng-show="reportFTP.getToggleStateFtpReport(item.id)" ng-click="reportFTP.saveClientFTPReport(item)">Save</a>
                <a href="" style="margin-right: 10px; float: left;" ng-show="!reportFTP.getToggleStateFtpReport(item.id)" ng-click="reportFTP.deleteClientFTPReport(item)">Delete</a>
                <a href="" style="margin-right: 10px; float: left;" ng-show="reportFTP.getToggleStateFtpReport(item.id)" ng-click="reportFTP.cancelEditAddClientFTPReport(item)">Cancel</a>
            </div>
        </div>

    </div>
    <div class="table-spacer">&nbsp;</div>
    <div style="margin-bottom: 10px;">
        <button class="btn-green" ng-show="reportFTP.isEditFtpReport == undefined && reportFTP.accountId != null && reportFTP.accountId != '' && reportFTP.accountId != undefined" ng-click="reportFTP.addClientFTPReport()">Add FTP Report</button>
    </div>

</form>
